<template>
	<div class="index pt-2 pb-2">
		<div class="left">
			<a-button class="left-1">新 BUG</a-button>
			<div class="info">
				<div class="panel mb-3">
					<span class="title">浏览最多</span>
					<ul>
						<li
							v-for="item in 10"
							:key="item"
							class="text-ell"
							title="123">萨菲罗斯卡的浪费空间是打卡练腹肌拉萨看得见发杀了对方上空的飞机老师</li>
					</ul>
				</div>
			</div>
		</div>
		<div class="middle">
			<div class="search mb-2">
				<a-input-search
					placeholder="输入关键词"
					style="width:300px"
					class="input-search"
					@search="searchChange"></a-input-search>
			</div>
			<BugPanel
				v-for="(item,index) in bug_list"
				:key="index"
				class="mb-3"
				:dat="item"></BugPanel>
		</div>
		<div class="right">
			<a-button v-if="is_show_my_history" class="right-1">我的发布记录</a-button>
			<div class="panel">
				<span class="title">贡献最多</span>
				<ul>
					<li
						v-for="item in 10"
						:key="item"
						class="text-ell"
						title="123">{{item}}奉献奉献奉献奉献奉献奉献奉献奉献</li>
				</ul>
			</div>
			<div class="tip mt-1 p-1">
				<span>TIP</span>
				<p>1. 您发布一个新BUG，系统会自动给您分配一个临时账号，该账号保存在缓存中。</p>
				<p>2. 若系统检测到您浏览器存在账号，则发布新BUG将绑定该账号，并且可以查看该账号下的所有发布记录。</p>
			</div>
		</div>
	</div>
</template>

<script lang='ts'>

import { defineComponent, reactive, ref } from 'vue'
import BugPanel from '@/components/panel/bug-panel.vue'
import { BUG_WANT_ACCOUNT_KEY } from '@/common/config'
import { LS } from '@/common/F'

type eeee = {
	target: Document
}

export default defineComponent({
	components: {
		BugPanel,
	},
	setup() {
		let bug_list: Array<Object> = reactive([])
		let bug_list_0: Array<Object> = reactive([])
		let search_value: any = ref('') // 搜索
		let is_http: boolean = true // 是否请求
		let is_show_my_history = LS.get(BUG_WANT_ACCOUNT_KEY) ? true : false // 是否显示我的发布记录

		for(let i = 0; i < 7; i++)
		{
			bug_list.push({
				id: i + 1,
				title: i + '标题标题',
				content: '斯洛伐克就塑料袋放进是顶级联赛的快捷方式考虑到翻开历史东方时空的积分是两块'
			})
		}
		bug_list_0 = [...bug_list]

		const searchChange = (value: string): void => { // 搜索
			bug_list = bug_list_0.filter((e: any): boolean => {
				return e.title.indexOf(value) != -1
			})
		}
		const scroll = (e: eeee): void => { // 页面滚动加载新数据列表
            let scroll_top: number = e.target.documentElement.scrollTop
			let scroll_top_max: number = e.target.documentElement.scrollTopMax
            console.log(scroll_top, scroll_top_max)
			if(scroll_top_max - scroll_top < 500 && is_http) {
				is_http = false
				for(let i = 0; i < 5; i++)
				{
					bug_list.push({
						id: i + 1,
						title: i + '标题标题',
						content: '斯洛伐克就塑料袋放进是顶级联赛的快捷方式考虑到翻开历史东方时空的积分是两块'
					})
				}
				is_http = true
			}
        }
		window.addEventListener('scroll', scroll)

		const changeFFF = (): void => {
			console.log('123')
		}

		return {
			search_value,
			bug_list_0, // 列表源数据
			bug_list, // 显示列表
			is_show_my_history, // 是否显示我的发布记录

			searchChange,
			changeFFF
		}
	}
})
</script>

<style lang="scss" scoped>
.search {
	display: flex;
	justify-content: flex-end;
	position: sticky;
	top: 10px;
	z-index: 1000;
}

.index {
	display: flex;
	justify-content: center;
	align-items: flex-start;
}
.left {
	flex-shrink: 0;
	position: sticky;
	top: 70px;
	.left-1 {
		@include main-button(1, true);
		width: 100%;
		height: 60px;
		font-weight: 600;
		font-size: 1.1rem;
	}
	.info {
		margin-top: 30px;
		width: 250px;
	}
}

.panel {
	padding: 10px;
	background-color: white;
	box-shadow: 0 0 5px -1px #ddd;
	.title {
		width: 100%;
		display: inline-block;
		text-align: center;
		color: #bbb;
		font-weight: 600;
	}
	ul {
		margin-top: 10px;
		margin-bottom: 0;
		padding: 5px;
		color: #999;
		li {
			margin-bottom: 5px;
			cursor: pointer;
			transition: all .3s;
			font-weight: 500;
			&:hover {
				color: $color-1;
				font-weight: 600;
			}
		}
	}
}

.middle {
	padding: 0 20px;
	margin-left: 20px;
	margin-right: 20px;
	width: 50%;
}

.right {
	position: sticky;
	top: 70px;
	width: 200px;
	flex-shrink: 0;
	z-index: 2;
	.right-1 {
		@include main-button(2, true);
		width: 100%;
		margin-bottom: 10px;
	}
	.tip {
		font-size: 12px;
		color: #999;
	}
}

</style>